<template>
  <h4 class="quote mb-1">
    {{ title }}
  </h4>
  <a-table :data="props.data" v-bind="$attrs" :pagination="false" :bordered="false" :default-expand-all-rows="true">
    <template #columns>
      <slot></slot>
    </template>
  </a-table>
</template>

<script setup lang="ts">
  import { TableData } from '@arco-design/web-vue'
  import { PropType } from 'vue'

  const props = defineProps({
    data: {
      type: Array as PropType<TableData[]>,
      required: true
    },
    title: String as PropType<string>
  })
</script>

<style lang="less" scoped>
  .quote {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-text-2);
    &::before {
      display: inline-block;
      content: '';
      background-color: rgb(var(--primary-6));
      width: 5px;
      height: 15px;
      margin-right: 10px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
</style>
